<template>
  <div class="root">
    <header-bar v-if="!$route.meta.withoutTopbar"></header-bar>
    <router-view></router-view>
    <alerts-modal></alerts-modal>
  </div>
</template>

<script>
  import AlertsModal from 'components/view/other/alerts-modal'
  import HeaderBar from './header-bar/index'
  import api from 'api'

  export default {
    name: 'Dashboard',

    components: {
      HeaderBar,
      AlertsModal
    },
    mounted () {
      console.log(this.$route)
      this.getProducts()
      this.requestRestfulData()
    },
    methods: {
      /**
      * 获取所有产品
      * @return {void}
      */
      getProducts () {
        this.loading = true
        api.product.all().then((res) => {
          this.$store.dispatch('addProducts', res.data)
        }).catch((res) => {
          this.loading = false
          this.handleError(res)
        })
      },
      requestRestfulData () {
        // 发送消息给vuex,vuex中写了申请api接口(关于统计数据表部分)
        this.$store.dispatch('updateWaterStatistics', this)
        this.$store.dispatch('updateElectricalStatistics', this)
        this.$store.dispatch('updatePhoneStatistics')
      }
    }
  }
</script>

<style lang="stylus">
  .root
    background: #0D0D0D;
    height 100%;
</style>
